<style lang="stylus" scoped>
bgBlue = linear-gradient(to right, #04befe, #4481eb)
nav
  width 100%
  height 50px
  background bgBlue
  img
    display inline-block
    float left
    width 25px
    height 25px
    margin 12px 10px
  p
    display inline-block
    width 80%
    float left
    font-size 18px
    color #ffffff
    text-align center
    line-height 50px
p
  text-align center
.top
  padding 10rem 0 1.5rem 0
  text-align center
  background #ffffff
  color #000
.ivu-form-item
  margin-bottom 24px
  vertical-align top
  zoom 1
  width 80%
  margin 1rem 10%
button
  width 92%
  margin 4%
</style>
<template>
  <div>
    <nav>
        <img @click="onClose" src="./imgs/icon-left.png" alt="">
        <p>立即办卡</p>
    </nav>
    <p class="top">完成信息录入，保障申卡顺畅</p>
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
      <FormItem prop="user">
        <Input type="text" v-model="formInline.user" placeholder="请输入办卡人真实姓名"/>

        <!-- <Icon type="ios-person-outline" slot="prepend"></Icon> -->
        <Icon type="android-person" slot="prepend"></Icon>

      </FormItem>
      <FormItem prop="tel">
        <Input type="text" v-model="formInline.tel" placeholder="请输入办卡人真实电话"/>
        <!-- <Icon type="ios-locked-outline" slot="prepend"></Icon> -->
        <Icon type="ios-telephone" slot="prepend"></Icon>

      </FormItem>
      <FormItem prop="idCard">
        <Input type="text" v-model="formInline.idCard" placeholder="请输入办卡人真实身份证号"/>
        <!-- <Icon type="ios-locked-outline" slot="prepend"></Icon> -->
        <Icon type="card" slot="prepend"></Icon>
      </FormItem>
      <FormItem>
        <div class="wykh_text">发卡行</div>
        <div class="wykh_input">
          <i-select v-model="formInline.bankName" style="width:200px">
            <i-option v-for="item in cardList" :value="item.bankId" :key="item.bankId">{{ item.bankName }}</i-option>
          </i-select>
        </div>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit">提交</Button>
        <p>已提交过？ <a href="https://creditcardapp.bankcomm.com/applynew/front/apply/new/reversion/cardlist.html?trackCode=A041314156569&commercial_id=null&telecom_id=null">跳过</a></p>
      </FormItem>
    </Form>
    <!-- <Button type="primary">Primary</Button> -->
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "InputInfo",
  data() {
    return {
      formInline: {
        user: "",
        tel: "",
        bank: "",
        idCard: ""
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur"
          }
        ],
        tel: [
          {
            required: true,
            message: "请输入正确的手机号码",
            min: 11,
            max: 11,
            trigger: "blur"
          },
          {
            type: "string",
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        idCard: [
          {
            required: true,
            min: 18,
            max: 18,
            message: "请输入正确身份证号码",
            trigger: "blur"
          },
          {
            type: "string",
            message: "请输入正确身份证号码",
            trigger: "blur"
          }
        ]
      },
      cardList: []
    };
  },
  mounted () {
    if(!this.$store.state.show){
      this.$router.push({path: '/repayment'});
    }
  },
  created() {
    var _this = this;
    axios
      .post("/web/api/bank/list")
      .then(function(res) {
        var data = res.data.date;
        _this.cardList = data;
        console.log(data);
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  methods: {
    onClose(){
      this.$router.back(-1)
    },
    handleSubmit() {
      // console.log("userInfo:", this.$store.state.user.userId);
      var _this = this;
      axios
        .post("web/api/createCard/createCardInfo", {
          userId: _this.$store.state.user.userId,
          realName: _this.formInline.user,
          bankName: _this.formInline.bankName,
          idNumber: _this.formInline.idCard,
          phone: _this.formInline.tel
        })
        .then(function(res) {
          // console.log("立即办卡：", res);
          var data = res.data.date;
          _this.$Message.success(res.data.message);
          var e =
            "https://creditcardapp.bankcomm.com/applynew/front/apply/new/reversion/cardlist.html?trackCode=A041314156569&commercial_id=null&telecom_id=null";
          window.location.href = e;
        })
        .catch(err => {
          console.log("err:", err);
        });
    }
  }
};
</script>


